.#{$ns}Checkbox {
  margin: var(--Form-label-paddingTop) var(--gap-sm) 0 0;
  font-weight: var(--fontWeightNormal);
  display: inline-block;
  cursor: pointer;

  &.disabled {
    cursor: not-allowed;
  }

  > input {
    display: none;
  }

  > i {
    line-height: 1;
    display: inline-block;
    vertical-align: text-bottom;
    position: relative;
  }

  &.is-mobile {
    > i {
      + span {
        vertical-align: middle;
      }
    }
  }

  &--partial {
    .checkbox-icon {
      content: var(--checkbox-default-partial-default-icon);
    }
  }

  @mixin checkbox-default-style($type) {
    font-size: var(#{$type}-fontSize);
    color: var(#{$type}-text-color);
    > i {
      width: var(#{$type}-height);
      height: var(#{$type}-height);
      border-width: borderWidth(#{$type});
      border-style: borderStyle(#{$type});
      border-color: borderColor(#{$type});
      border-radius: radius(#{$type});
      background: var(#{$type}-bg-color);
    }
  }

  &--checkbox--default {
    font-weight: var(--checkbox-default-default-fontWeight);
    @include checkbox-default-style(--checkbox-default-default);
    > i {
      margin-right: var(--checkbox-default-default-distance);
      .icon {
        height: var(--checkbox-default-checked-default-icon-size);
        width: var(--checkbox-default-checked-default-icon-size);
        color: var(--checkbox-default-checked-default-icon-color);
        transition: all var(--animation-duration);
        transform: scale(0);
      }
    }

    &:hover:not(.disabled):not(.checked) {
      @include checkbox-default-style(--checkbox-default-hover);
    }
    &:active:not(.disabled):not(.checked) {
      @include checkbox-default-style(--checkbox-default-active);
    }
  }
  &--checkbox--default--checked {
    @include checkbox-default-style(--checkbox-default-checked-default);
    > i {
      .icon {
        transform: scale(1);
      }
    }
    &:hover:not(.disabled) {
      @include checkbox-default-style(--checkbox-default-checked-hover);
    }
    &:active:not(.disabled) {
      @include checkbox-default-style(--checkbox-default-checked-active);
    }
  }
  &--checkbox--default--disabled--unchecked {
    @include checkbox-default-style(--checkbox-default-disabled);
  }
  &--checkbox--default--disabled--checked {
    @include checkbox-default-style(--checkbox-default-checked-disabled);
    > i {
      .icon {
        transform: scale(1);
        color: var(--checkbox-default-checked-disabled-icon-color);
      }
    }
  }

  @mixin checkbox-button-style($type) {
    border-color: borderColor(#{$type});
    color: var(#{$type}-text-color);
    > i {
      width: var(#{$type}-icon-bg-size);
      height: var(#{$type}-icon-bg-size);
      background-color: var(#{$type}-icon-bg-color);
      .icon {
        width: var(#{$type}-icon-size);
        height: var(#{$type}-icon-size);
        color: var(#{$type}-icon-color);
      }
    }
  }

  &--checkbox--button {
    text-align: center;
    height: var(--checkbox-button-default-height);
    line-height: var(--checkbox-button-default-lineHeight);
    padding: padding(--checkbox-button-default);
    min-width: px2rem(80px);
    font-size: var(--checkbox-button-default-fontSize);
    color: var(--checkbox-button-default-text-color);
    border-radius: 0;
    border-color: borderColor(--checkbox-button-default);
    border-width: borderWidth(--checkbox-button-default);
    border-style: borderStyle(--checkbox-button-default);
    margin-right: calc(
      var(--checkbox-button-default-right-border-width) * -1
    ) !important;
    position: relative;
    &.first {
      border-radius: var(--checkbox-button-default-top-left-border-radius) 0 0
        var(--checkbox-button-default-bottom-left-border-radius);
    }
    &.last {
      border-radius: 0 var(--checkbox-button-default-top-right-border-radius)
        var(--checkbox-button-default-bottom-right-border-radius) 0;
    }
    &.first.last {
      border-radius: var(--checkbox-button-default-top-left-border-radius)
        var(--checkbox-button-default-top-right-border-radius)
        var(--checkbox-button-default-bottom-right-border-radius)
        var(--checkbox-button-default-bottom-left-border-radius);
    }
    &.last-line {
      margin-bottom: 0 !important;
    }
    &:hover:not(.disabled):not(.checked) {
      color: var(--checkbox-button-hover-text-color);
      border-color: borderColor(--checkbox-button-hover);
      z-index: 1;
    }
  }
  &--checkbox--button--checked {
    z-index: 1;
    @include checkbox-button-style(--checkbox-button-checked-default);
    > i {
      position: absolute;
      top: 0;
      left: 0;
      clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
      .icon {
        transform: scale(0.8) translate(-20%, -20%);
      }
    }

    &:hover {
      @include checkbox-button-style(--checkbox-button-checked-hover);
    }
    &:active {
      @include checkbox-button-style(--checkbox-button-checked-active);
    }
  }
  &--checkbox--button--disabled--unchecked {
    color: var(--checkbox-button-disabled-text-color);
    background: var(--checkbox-button-disabled-bg-color);
    border-color: borderColor(--checkbox-button-disabled);
  }
  &--checkbox--button--disabled--checked {
    background: var(--checkbox-button-checked-disabled-bg-color);
    @include checkbox-button-style(--checkbox-button-checked-disabled);
    > i {
      position: absolute;
      top: 0;
      left: 0;
      clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
      .icon {
        transform: scale(0.8) translate(-20%, -20%);
      }
    }
  }

  &--radio--default {
    color: var(--radio-default-default-text-color);
    font-size: var(--radio-default-default-fontSize);
    font-weight: var(--radio-default-default-fontWeight);
    line-height: var(--radio-default-default-lineHeight);

    > i {
      width: var(--radio-default-default-point-size);
      height: var(--radio-default-default-point-size);
      border: var(--borders-width-2) var(--borders-style-2)
        var(--radio-default-default-border-color);
      margin-top: px2rem(-2px);
      border-radius: var(--borders-radius-7);
      background: var(--radio-default-default-bg-color);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      .icon {
        width: var(--radio-default-checked-icon-size);
        height: var(--radio-default-checked-icon-size);
        color: var(--radio-default-checked-icon-color);
        transition: all var(--animation-duration);
        transform: scale(0);
        display: flex;
      }
    }
    > span {
      margin-left: var(--radio-default-default-distance);
    }

    &:hover:not(.disabled) {
      color: var(--radio-default-hover-text-color);
      > i {
        border-color: var(--radio-default-hover-border-color);
        background-color: var(--radio-default-hover-bg-color);
      }
    }
  }
  &--radio--default--checked {
    color: var(--radio-default-checked-text-color);
    > i {
      border-color: var(--radio-default-checked-border-color);
      background-color: var(--radio-default-checked-bg-color);
      .icon {
        transform: scale(1);
      }
    }
  }
  &--radio--default--disabled--unchecked {
    color: var(--radio-default-disabled-text-color);
    > i {
      border-color: var(--radio-default-disabled-border-color);
      background-color: var(--radio-default-disabled-bg-color);
    }
  }
  &--radio--default--disabled--checked {
    color: var(--radio-default-disabled-text-color);
    > i {
      border-color: var(--radio-default-disabled-border-color);
      background-color: var(--radio-default-disabled-bg-color);

      .icon {
        color: var(--radio-default-disabled-icon-color);
        transform: scale(1);
      }
    }
  }

  &--radio--button {
    text-align: center;
    height: var(--radio-button-default-height);
    padding: padding(--radio-button-default);
    min-width: px2rem(80px);
    font-size: var(--radio-button-default-fontSize);
    color: var(--radio-button-default-text-color);
    line-height: var(--radio-button-default-lineHeight);
    border-radius: radius(--radio-button-default);
    border-color: borderColor(--radio-button-default);
    border-width: borderWidth(--radio-button-default);
    border-style: borderStyle(--radio-button-default);

    &:hover:not(.disabled):not(.checked) {
      color: var(--radio-button-hover-text-color);
      border-color: borderColor(--radio-button-hover);
    }
    > i {
      display: none;
    }
    span {
      margin-left: 0;
    }
  }
  &--radio--button--checked {
    color: var(--radio-button-checked-text-color);
    border-color: borderColor(--radio-button-checked);
    background-color: var(--radio-button-checked-bg-color);
  }
  &--radio--button--disabled--unchecked {
    color: var(--radio-button-disabled-unchecked-text-color);
    border-color: borderColor(--radio-button-disabled-unchecked);
    background: var(--radio-button-disabled-unchecked-bg-color);
  }
  &--radio--button--disabled--checked {
    color: var(--radio-button-disabled-checked-text-color);
    border-color: borderColor(--radio-button-disabled-checked);
    background: var(--radio-button-disabled-checked-bg-color);
  }

  &--sm {
    &.#{$ns}Checkbox {
      display: inline-flex;
      align-items: center;
    }
    > i {
      width: var(--checkbox-default-sm-size);
      height: var(--checkbox-default-sm-size);
      .icon {
        width: var(--checkbox-default-sm-icon-size);
        height: var(--checkbox-default-sm-icon-size);
      }
    }
    &.#{$ns}Checkbox.#{$ns}Checkbox--checkbox--default:hover {
      > i {
        width: var(--checkbox-default-sm-size);
        height: var(--checkbox-default-sm-size);
        .icon {
          width: var(--checkbox-default-sm-icon-size);
          height: var(--checkbox-default-sm-icon-size);
        }
      }
    }
  }

  &-desc {
    color: var(--text--muted-color);
    margin-left: var(--gap-xs);
    margin-top: var(--gap-xs);
    pointer-events: all;
  }
}

.#{$ns}Form-static .#{$ns}Checkbox {
  input {
    &[disabled]:checked + i {
      background: var(--Checkbox-onHover-bg);
      &:before {
        background: var(--Checkbox-onHover-bg);
        border-color: var(--Checkbox-onHover-bg);
      }
    }
  }
}

.#{$ns}CheckboxControl,
.#{$ns}RadiosControl,
.#{$ns}CheckboxesControl {
  padding-top: calc(
    (var(--Form-input-height) - var(--Checkbox-size)) / 2 - 3px
  ); // 3px 是空白的高度
}

.#{$ns}RadiosControl {
  .#{$ns}Checkbox {
    display: block;
    margin: var(--radio-default-vertical-marginTop)
      var(--radio-default-vertical-marginRight)
      var(--radio-default-vertical-marginBottom)
      var(--radio-default-vertical-marginLeft);
  }

  &.is-inline .#{$ns}Checkbox {
    display: inline-block;
    margin: var(--radio-default-default-marginTop)
      var(--radio-default-default-marginRight)
      var(--radio-default-default-marginBottom)
      var(--radio-default-default-marginLeft);
  }

  &.is-inline .#{$ns}Checkbox--button {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 0;
  }
}

.#{$ns}CheckboxesControl {
  .#{$ns}Checkbox {
    display: block;
  }

  &.is-inline .#{$ns}Checkbox {
    display: inline-block;
    margin-right: var(--gap-md);
  }

  &.is-inline .#{$ns}Checkbox--button {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 0;
  }

  .#{$ns}Checkboxes-addBtn {
    > svg {
      width: px2rem(14px);
      height: px2rem(14px);
      margin-right: var(--Checkbox-gap);
    }
  }
}

.#{$ns}RadiosControl-group,
.#{$ns}CheckboxesControl-group {
  &:not(:first-child) {
    margin-top: px2rem(10px);
  }

  .#{$ns}RadiosControl-groupLabel,
  .#{$ns}CheckboxesControl-groupLabel {
    display: block;
    font-size: var(--fontSizeSm);
    color: #999;
  }
}

.#{$ns}RadiosControl {
  .#{$ns}Button:active,
  .#{$ns}Button.is-active {
    background: var(--ButtonGroup--primary-isActive-bg);
  }
}
.#{$ns}Grid {
  > div > .#{$ns}Checkbox--checkbox--button {
    border-radius: radius(--checkbox-button-default);
  }
}

.checkbox-icon {
  content: var(--checkbox-default-checked-default-icon);
}

.radio-icon {
  content: var(--radio-default-checked-icon);
}
